<script setup lang="ts">
withDefaults(defineProps<Partial<{
  /** 监控企业数 */
  value1: string
  /** 监测点数 */
  value2: string
  /** 监控数据数 */
  value3: string
}>>(), {
  value1: '67',
  value2: '34',
  value3: '266,857',
})
</script>

<template>
  <div>
    <table>
      <tr>
        <th>监控企业数</th>
        <td>{{ value1 }}</td>
      </tr>
      <tr>
        <th>监测点数</th>
        <td>{{ value2 }}</td>
      </tr>
      <tr>
        <th>监控数据数</th>
        <td>{{ value3 }}</td>
      </tr>
    </table>
  </div>
</template>

<style scoped>
table {
  color: rgba(133, 177, 255, 1);
  border: 1px solid;
}
table td,
table th {
  border-left: 1px solid;
  border-bottom: 1px solid;
  font-weight: 500;
  padding: 5px 10px;
}
table th {
  font-size: 14px;
}
table td:first-child,
table th:first-child {
  border-left: 0;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 0;
}
table tr td:last-child {
  color: rgba(62, 235, 255, 1);
}
</style>
